<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>users.jsp会员管理系统</title>
    <!-- 总结: / 代表的是绝对路径,代表到端口结束, 没有带contextPath
            ./ 和 ../ 代表的都是相对路径,相对于当前页面users.jsp的url访问路径来说的
            ./代表当前目录, ../代表的是上一级目录

            访问本users.jsp页面路径
            http://localhost:8088/um/user/users.html
            ./  代表为 http://localhost:8088/um/user/
            ../ 代表为 http://localhost:8088/um/
            如果不以 / 开头,也不以 ./ 和 ../ 开头,就以 abc 开头 ,如
            abc/js/myEasyui.css
            就和 ./ 一致,代表当前目录

            href="./js/myEasyui.css" 相对路径
            http://localhost:8088/um/user/js/myEasyui.css

            href="../js/myEasyui.css"
            http://localhost:8088/um/js/myEasyui.css

            href="../../js/myEasyui.css"
            http://localhost:8088/js/myEasyui.css

            href="../../../js/myEasyui.css"
            http://localhost:8088/js/myEasyui.css

            href="abc/js/myEasyui.css"
            http://localhost:8088/um/user/abc/js/myEasyui.css

            正确访问easyui.css的路径是
            http://localhost:8088/um/js/myEasyui.css
        -->
    <link rel="stylesheet" type="text/css" href="../js/myEasyui.css"/>

    <%--    js/myEasyui.css就是  js/jquery-easyui-1.4/themes/default/easyui.css  --%>
    <%--	<link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.4/themes/default/easyui.css" />--%>

    <link rel="stylesheet" type="text/css" href="../../../um/js/jquery-easyui-1.4/themes/icon.css"/>
    <script type="text/javascript" src="/../../../../um/js/jquery-easyui-1.4/jquery.min.js"></script>
    <script type="text/javascript" src="../../../../um/js/jquery-easyui-1.4/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/um/js/jquery-easyui-1.4/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/common.js"></script>

    <script type="text/javascript">
        $(function () {
            // 修改用户窗口
            $('#editUserWindow').window({
                title: '修改用户--scy弹显覆盖后',//编辑按钮 弹出显示, 覆盖了172行中的title(用户修改scy弹显覆盖前)
                width: 600,
                modal: true,
                shadow: true,
                closed: true,
                height: 400,
                resizable: false
            });

            //修改用户信息
            $("#save").click(function () {
                //校验表单
                if ($("#editUserForm").form("validate")) {
                    //校验通过,提交表单
                    $("#editUserForm").submit();
                }
            });
        });
    </script>

</head>
<body class="easyui-layout">
<div>
    <!-- toolbarscy生成四个按钮 -->
    <table class="easyui-datagrid" id="userList" title="会员列表"
           data-options="singleSelect:true,collapsible:true,pagination:true,url:'${pageContext.request.contextPath}/user/list',method:'post',pageSize:5,toolbar:toolbarscy,pageList:[2,5,10]">
        <thead>
        <tr>
            <th data-options="field:'ck',checkbox:true"></th>
            <th data-options="field:'id',width:60">ID</th>
            <th data-options="field:'userName',width:200">用户名</th>
            <th data-options="field:'name',width:100">姓名</th>
            <th data-options="field:'age',width:100">年龄</th>
            <th data-options="field:'sex',width:80,align:'right',formatter:formatSet">性别</th>
            <th data-options="field:'birthday',width:80,align:'right',formatter:formatBirthday">出生日期</th>
            <th data-options="field:'created',width:130,align:'center',formatter:formatDate">创建日期</th>
            <th data-options="field:'updated',width:130,align:'center',formatter:formatBirthday">更新日期</th>
        </tr>
        </thead>
    </table>
</div>


<script type="text/javascript">
    function formatDate(val, row) {
        var now = new Date(val);
        return now.format("yyyy-MM-dd hh:mm:ss");
    }

    function formatBirthday(val, row) {
        var now = new Date(val);
        return now.format("yyyy-MM-dd");
    }

    function formatSet(val, row) {
        if (val == 1) {
            return "男";
        } else if (val == 2) {
            return "女";
        } else {
            return "未知";
        }
    }

    function getSelectionsIds() {
        var userList = $("#userList"); //最大的table
        var sels = userList.datagrid("getSelections");//获取选择的行
        var ids = [];
        for (var i in sels) {
            ids.push(sels[i].id);//向数组中添加元素
        }
        ids = ids.join(",");//join() 方法用于把数组中的所有元素放入一个字符串。并以,为分隔符
        return ids;
    }

    var toolbarscy = [{ //生成toolbar 新增 修改 删除 导出 四个按钮
        text: '新增scy直显',//在toolbar中显示的名称
        iconCls: 'icon-add',
        handler: function () {
            $('#userAdd').window('open');
        }
    }, {
        text: '编辑scy直显',
        iconCls: 'icon-edit',
        handler: function () { //单击这个按钮时执行该handler
            var userList = $("#userList");  //最大的table的id
            //获取选择的行
            var rowSelected = userList.datagrid("getSelections");
            //判断用户是否选择了行
            if (rowSelected == null || rowSelected.length == 0) {
                $.messager.alert("警告", "请先选择需要编辑的行!", "warning");
                return;
            }
            //只能选择一行
            if (rowSelected.length > 1) {
                $.messager.alert("警告", "每次只能选择修改一行!", "warning");
                return;
            }

            //格式化日期格式
            //生日
            rowSelected[0].birthday = formatBirthday(rowSelected[0].birthday);
            //创建日期
            rowSelected[0].created = formatBirthday(rowSelected[0].created);
            //更新日期
            rowSelected[0].updated = formatBirthday(rowSelected[0].updated);

            //打开编辑窗口
            $("#editUserWindow").window("open");
            //回显数据信息
            $("#editUserForm").form("load", rowSelected[0]);
            //给id隐藏域设置值
            $("#id").val(rowSelected[0].id);
            //重置表单数据
            //$("#editUserForm").form("reset");

        }
    }, {
        text: '删除',
        iconCls: 'icon-cancel',
        handler: function () {
            var ids = getSelectionsIds();
            if (ids.length == 0) {
                $.messager.alert('提示', '未选中用户!');
                return;
            }
            $.messager.confirm('确认', '确定删除ID为 ' + ids + ' 的会员吗？', function (r) {
                if (r) {
                    $.post("/user/delete", {'ids': ids}, function (data) {
                        if (data.status == 200) {
                            $.messager.alert('提示', '删除会员成功!', undefined, function () {
                                $("#userList").datagrid("reload");
                            });
                        }
                    });
                }
            });
        }
    }, '-', {
        text: '导出',
        iconCls: 'icon-remove',
        handler: function () {
            var optins = $("#userList").datagrid("getPager").data("pagination").options;
            var page = optins.pageNumber;
            var rows = optins.pageSize;

            //创建一个新的form表单--- 原始代码,已过时
            //https://blog.csdn.net/jiongxian1/article/details/78207331
            //谷歌浏览器控制台报错
            // Form submission canceled because the form is not connected

            // $("<form>").attr({
            //     "action": "/user/export/excel",
            //     "method": "POST"
            // }).append("<input type='text' name='page' value='" + page + "'/>")
            //     .append("<input type='text' name='rows' value='" + rows + "'/>").submit();


            //参考解决 https://www.cnblogs.com/godbell/p/7455677.html
            //创建一个新的form表单
            var formVar = $("<form>").attr({
                "action": "${pageContext.request.contextPath}/user/export/excel",
                "method": "POST"
            }).append("<input type='text' name='page' value='" + page + "'/>")
                .append("<input type='text' name='rows' value='" + rows + "'/>");

            $(document.body).append(formVar);
            formVar.submit();
        }
    }];
</script>


<!-- 点击 新增 按钮时弹出 -->
<div id="userAdd" class="easyui-window" title="新增会员--scy弹显"
     data-options="modal:true,closed:true,iconCls:'icon-save',href:'${pageContext.request.contextPath}/user/user-add.html'"
     style="width:400px;height:400px;padding:10px;">
    The window content.
</div>


<!-- 这个div一直都是存在的,当它加载完成后,被head中的javaScript修改,把它隐藏起来了.然后在 单击 '编辑scy直显' 时,才将这个修改后的div打开 -->
<div class="easyui-window" title="用户修改scy弹显覆盖前" id="editUserWindow" collapsible="true" minimizable="false"
     maximizable="false" style="top:20px;left:200px">
    <div style="height:31px;overflow:hidden;" split="false" border="false">
        <div class="datagrid-toolbar">
            <a id="save" icon="icon-save" href="#" class="easyui-linkbutton" plain="true">保存scy</a>
        </div>
    </div>

    <div style="overflow:auto;padding:5px;" border="false">
        <form id="editUserForm" action="/user/updateUser" method="post">
            <table class="table-edit" width="80%" align="center">
                <tr class="title">
                    <td colspan="2">用户信息scy</td>
                </tr>
                <tr>
                    <td>用户名</td>
                    <td>
                        <input type="text" name="userName" class="easyui-validatebox" required="true"/>
                        <!-- 设置隐藏域,提交用户id信息 -->
                        <input type="hidden" id="id" name="id"/>
                    </td>
                </tr>
                <tr>
                    <td>姓名</td>
                    <td><input type="text" name="name" class="easyui-validatebox" required="true"/></td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td><input type="text" name="password" class="easyui-validatebox" required="true"/></td>
                </tr>
                <tr>
                    <td>年龄</td>
                    <td><input type="text" name="age" class="easyui-validatebox" required="true"/></td>
                </tr>
                <tr>
                    <td>性别</td>
                    <td>
                        <input type="text" name="sex" class="easyui-validatebox" required="true"
                               data-options="field:'sex',width:80,align:'right',formatter:formatSet"/>
                    </td>
                </tr>
                <tr>
                    <td>出生日期</td>
                    <td><input type="text" name="birthday" class="easyui-datebox" required="true"/></td>
                </tr>
                <tr>
                    <td>创建日期</td>
                    <td><input type="text" name="created" class="easyui-datebox" required="true"/></td>
                </tr>
                <tr>
                    <td>更新日期</td>
                    <td><input type="text" name="updated" class="easyui-datebox" required="true"/></td>
                </tr>
            </table>
        </form>
    </div>
</div>


</body>
</html>